<template>
  <div class="top-menu">
    <a-button type="primary" @click="toggleCollapsed" class="top-menu-btn">
      <MenuUnfoldOutlined  v-if="collapsed" />
      <MenuFoldOutlined  v-else />
    </a-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, Ref, toRefs } from 'vue'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'

export default defineComponent ({
  name: 'TopMenu',
  components: { MenuUnfoldOutlined, MenuFoldOutlined },
  props: {
    state: Boolean
  },
  setup(props, { emit }){
    const collapsed: Ref<Boolean> = ref(props.state)

    let toggleCollapsed = () => {
      collapsed.value = !collapsed.value;
      emit('changeCollapsed', collapsed.value)
    }

    return { collapsed, toggleCollapsed }
  },
})
</script>

<style lang="less" scoped>
  .top-menu {
    height: 68px;
    box-shadow: 3px 3px 3px rgba(177, 177, 177, 0.5);
    .top-menu-btn {
      margin: 16px;
    }
  }
</style>